<script setup>
import OApageheader from '../../components/OApageheader.vue';
import {ref,reactive,onMounted,computed,watch} from 'vue';
import {ElMessage} from 'element-plus';
import apiClient from '../../api/api';
import OAMain from '../../components/OAMain.vue';
import OAdialog from '../../components/OAdialog.vue';

let absents = ref([]); 
let sub = ref("sub")
let pagination = reactive({ // 分页数据
  total: 1, // 总条数
  page: 1, // 当前页码
  pageSize: 5, // 每页显示条数

});

let dialogFormVisible = ref(false); // 控制对话框的显示与隐藏

let form = reactive({ // 表单数据
    status: 2, // 状态
    reply_content: '', // 反馈意见
});

let absentform = ref(); // 表单实例

let rules = reactive({ // 表单验证规则
    status: [ // 状态验证规则
        { required: true, message: '请选择处理结果状态', trigger: 'change' }, // 状态不能为空
    ],
    reply_content: [ // 内容验证规则
        { required: true, message: '请输入内容', trigger: 'blur' },
    ],
});

let handleindex = 0; // 处理的考勤索引id

const onShowdialog = (index) => { // 打开对话框
  form.status = 2; // 重置表单数据
  form.reply_content = ''; // 重置内容
  handleindex = index; // 处理的考勤索引id
  dialogFormVisible.value = true; // 打开对话框
  
}
const pageabsents = async (page) => {
  try {
    const res_absent = await apiClient.get('absent/absents/', {
      params: {
        person:sub.value,
        page: page,
        page_size: pagination.pageSize,
      }
    });

    pagination.total = res_absent.data.count; // 获取总条数
    let results = res_absent.data.results; // 获取分页数据列表
    absents.value = results; // 将分页数据列表赋值给 absents
  } catch (error) {
    ElMessage.error(error.message);
  }
};

watch(() => pagination.page, (newVal) => { // 监听分页数据变化
      pageabsents(newVal); // 重新获取分页数据
  });

  // 页面加载完成后执行
onMounted(async() => { 
  try { 
    // 获取下属考勤数据
    pageabsents(1); // 调用分页数据函数，初始化获取第1页的数据


  } catch (error) { // 如果获取数据失败，打印错误信息
    ElMessage.error(error.message); // 提示错误信息
  }

})

// 对话框提交函数
const onSubmit = () => { // 提交表单
  absentform.value.validate(async (valid, fields) => { // 验证表单
    if (valid) { // 如果验证通过
      try { 
        const absent = absents.value[handleindex]; // 获取处理的考勤数据
        let res = await apiClient.put(`absent/absents/${absent.id}/`, {  // 添加表单数据
          status: form.status,
          reply_content: form.reply_content,
        }); 
        absents.value.splice(handleindex, 1,res.data); 

        ElMessage.success('考勤处理成功'); 
        dialogFormVisible.value = false; // 关闭对话框

      } catch (detail) { 
        ElMessage.error(detail); 
      }
    } else { // 如果验证不通过，提示错误信息
      ElMessage.error('请输入正确的信息');
    }
  });
}
</script>

<template>
    <!-- 使用封装好的组件格式OAMain -->
    <OAMain>
        <OApageheader content="下属考勤"></OApageheader>

     <!-- card卡片 -->
      <!-- 表格 -->
        <el-card>
            <!-- data必须是一个数组，prop表数组的对象，label是列标题（表头） -->
          <el-table :data="absents" style="width: 100%">   
              <el-table-column prop="title" label="标题" />
              <el-table-column prop="requester.realname" label="申请人" />
              <el-table-column prop="type.name" label="请假类型" />
              <el-table-column prop="content" label="原因" />
              <el-table-column prop="creat_time" label="发起时间" />

              <el-table-column prop="start_time" label="开始日期" />
              <el-table-column prop="end_time" label="结束日期" />
              <el-table-column prop="responder.realname" label="审核领导" />
              <el-table-column prop="reply_content" label="反馈意见" />
              <el-table-column prop="status" label="审核状态" >
                  <template #default="scope">
                      <el-tag type="info" v-if="scope.row.status==1"> 审核中</el-tag>
                      <el-tag type="success" v-else-if="scope.row.status==2"> 审核通过</el-tag>
                      <el-tag type="danger" v-else> 拒绝</el-tag>
                  </template>
              </el-table-column>

              <el-table-column label="处理">
                <template #default="scope">
                  <!-- scope.row表示当前的数据对象，如absents -->
                  <el-button v-if="scope.row.status==1" @click="onShowdialog(scope.$index)" type="primary" icon="EditPen" />
                  <el-button v-else disabled type="default"> 已处理</el-button>
                </template>
              </el-table-column>

            </el-table>
            
            <!-- 分页 -->
            <template #footer>
              <el-pagination background layout="prev, pager, next" :total="pagination.total" v-model:current-page="pagination.page" :page-size="pagination.pageSize" />
            </template>
        </el-card>
    </OAMain>
    <!-- 对话框 -->
    <OAdialog title="处理考勤" v-model="dialogFormVisible" @submit="onSubmit">
      <el-form :model="form" :rules="rules" ref="absentform" label-width="100px">
        <el-form-item label=" 结果" prop="status">
          <el-radio-group v-model="form.status">
            <el-radio :value="2">通过</el-radio>
            <el-radio :value="3">拒绝</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="理由" prop="reply_content">
          <el-input type="textarea" v-model="form.reply_content" autocomplete="off" />
        </el-form-item>
      </el-form>
    </OAdialog>
</template>

<style scoped>
.el-pagination {
    justify-content: center;
  }

</style>
